<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>管理员信息</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="layui/css/layui.css" >
    <!-- 引入 Element UI 样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>添加管理员信息</legend>
    </fieldset>
    <div class = "admin-form">
        <el-form :inline="true" :model="user" class="demo-form-inline" style="margin-left: 100px;">
            <el-form-item label="管理员名"   >
                <el-input v-model="user.username" placeholder="管理员名"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                 <el-input v-model="user.password" placeholder="密码"></el-input>
            </el-form-item>
            <el-form-item label="手机号">
                <el-input v-model="user.phone" placeholder="手机号"></el-input>
            </el-form-item>
            <el-form-item label="角色">
                <el-select v-model="user.role" placeholder="角色">
                    <el-option label="普通管理员" value="1"></el-option>
                    <el-option label="超级管理员" value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">添加</el-button>
            </el-form-item>
        </el-form>
    </div>
    <div class="admin-table">
        <template>
            <el-table
                    :data="tableData"
                    border
                     style="width: 930px; margin-left: 100px;"
                      >
                <el-table-column
                        fixed
                        prop="userId"
                        label="ID"
                        width="150" >
                </el-table-column>
                <el-table-column
                        prop="username"
                        label="姓名"
                        width="120">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.username"  ></el-input>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="password"
                        label="密码"
                        width="200">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.password"  ></el-input>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="phone"
                        label="手机号"
                        width="200">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.phone"  ></el-input>
                    </template>
                </el-table-column>

                <el-table-column
                        prop="role"
                        label="角色"
                        width="120"
                          >
                    <template slot-scope="scope">
                         <span v-if="scope.row.role == 1">普通管理员</span>
                        <span v-else-if="scope.row.role == 2">超级管理员</span>
                    </template>
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        width="100">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="text" size="small">修改</el-button>
                        <el-button @click="dlt(scope.row)" type="text" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
    </div>

</div>

<!-- 引入 Vue.js 和 Element UI 的脚本 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="http://47.106.66.89:8080/js/axios.min.js"></script>

<script>


    new Vue({
        el: '#app',
        data() {
            return {
                user: {
                    username: '',
                    password: '',
                    phone: '',
                    role: ''
                },
                tableData: [{
                    userId: '1',
                    username: '王小虎',
                    password: '123456',
                    phone: '19168188510',

                    role: '普通管理员'
                }],
                upuser: null,


            }
        },
        mounted() {
            this.select();



        },
        methods: {
            onSubmit() {

                axios.post('admin/add', this.user).then(res => {
                    if(res.data == 1){
                        alert("添加成功");
                        this.select();

                    }
                })
            },
            handleClick(row) {

                axios.post('admin/update', row).then(res => {

                  if(res.data ==    1){
                      alert("修改成功");
                      this.select();
                  }
                })
            },
            select(){
                axios.get('admin/select').then(res => {
                    this.tableData = res.data;



               });
            },

            dlt(row) {
                row.dlt = 0;
                axios.post('admin/delete', row).then(res => {

                    if(res.data ==    1){
                        alert("删除成功");
                        this.select();
                    }
                })
            },

        }
    });


</script>
</body>
</html>
